<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>el与data两种写法</title>
    <!-- 1.导入vue.js，他的目的用于构造Vue实例对象 -->
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 2.准备一个div容器，他的目的性：用于挂载到Vue对象上面，
        然后将Vue实例对象中的data数据渲染到页面上面
     -->
     <div id="app">
       
        <!-- 简写 v-bind:value和v-model:value 
            可以简写为 v-model，因为v-model默认收集的就是value值-->
        简写的单向数据绑定：<input type="text" :value="userName"><br/>
        简写的双向数据绑定：<input type="text" v-model="nickName"><br/>
     </div>
</body>
<!-- 3.通过new关键字  调用全局vue.js里面的Vue(options)构造函数 -->
<script>
    Vue.config.productionTip = false///去除生产环境的提示

   const a = new Vue({
        //el第一种写法  直接在Vue构造函数里面定义
        //el:'#app',//通过id选择器将div容器挂载到Vue实例对象上面
        //data第一种定义方式：对象式  语法满足  key:value,只不过value是对象的形式展示的
        // data:{  //对象式的数据源定义方式
        //     userName: '李伟',
        //     nickName: '黑皮'
        // }
        //data的第二种方式：函数式，组件模块开发就必须使用函数式
        data() {
            return {
                userName: '李伟',
                nickName: '黑皮'
            }
        },
        
    })
    //el的第二种方式  通过挂载的方式将容器挂载到Vue实例对象上面
    a.$mount('#app')
    //如果说没有使用第一种也没有使用这种，
    //data中的数据就没法渲染到页面
    console.log(a.userName)
</script>

</html>